import http from '@/utils/http'
import { useState } from 'react'
import { RefreshControl } from 'react-native'

interface Length {
  length: number
}
/** 按页数获取数据列表 */
export const useGetDataList = <T extends Length>(
  url: string,
  method: 'GET' | 'POST',
  size = 10
) => {
  // 数据列表
  // @ts-ignore
  const [dataList, setDataList] = useState<T>([])
  // 当前页数
  const [page, setPage] = useState(1)
  // 是否正在加载
  const [refreshing, setRefreshing] = useState(false)
  // 数据是否请求完毕
  const [finish, setFinish] = useState(false)

  // 获取数据列表
  const getDataList = async () => {
    if (finish) {
      // 没有数据了
      return
    }
    setRefreshing(true)
    if (refreshing) {
      // 正在请求数据
      return
    }
    const res = await http<any, T>({
      url,
      method,
      params: {
        page,
        size
      }
    })
    setRefreshing(false)
    if (res?.length) {
      setPage(page + 1)
      // @ts-ignore
      setDataList(pre => [...pre, ...res])
    } else {
      setFinish(true)
    }
  }
  // 重置数据
  const reset = () => {
    setPage(1)
    setFinish(false)
    // @ts-ignore
    setDataList([])
  }
  // 下拉刷新控件组件
  const refreshControl = () => {
    return <RefreshControl refreshing={refreshing} onRefresh={() => reset()} colors={['#f92845']} />
  }
  return {
    /** 数据列表 */
    dataList,
    /** 是否正在加载 */
    refreshing,
    /** 是否加载完成 */
    finish,
    /** 获取数据列表 */
    getDataList,
    /** 重置数据 */
    reset,
    /** 下拉刷新控件 */
    refreshControl
  }
}
